<template>
    <div>
 <div class="table-responsive"  v-loading="tableLoading">
            <el-table
                     v-bind:data="tablelist"                           
                     border
                      ref="multipleTable"
                       @selection-change="handleSelectionChange"
                     style="width: 100%">
              <el-table-column
                          type="selection"
                          width="60"> 
                  </el-table-column>      
              <el-table-column
                     prop="adverteName"
                     label="投放名称"
                     width="180">
                     <template slot-scope="scope">
                        <a><span class="eslip1"> {{scope.row.adverteName}} </span> </a><br/>
                        <span>ID: {{scope.row.id}} </span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="status"
                     label="状态"  width="130" >
                     <template slot-scope="scope">
                        <span v-if="scope.row.status==1"> 
                        <i class="el-icon-s-opportunity" style="color:green;"></i>投放中</span>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="placetype"
                     label="代码位"  >
                      <template slot-scope="scope">
                        <div v-if="scope.row.placeIds">
                        <p class="eslip1"  v-for="(item, index) in scope.row.placeIdsArr" :key="index" :label="item.value">
                           <el-tooltip class="item" effect="light" 
                           :content="  item.placeName + '['+ item.placeWidth+ item.sizeDot+ item.placeHeight+']' " placement="left">
                              <span>  {{item.id}}-{{item.placeName}}-({{item.placeWidth}}{{item.sizeDot}}{{item.placeHeight}} )</span>
                            </el-tooltip>
                           </p>
                        </div>
                     </template>
                     </el-table-column>
             <el-table-column
                     prop="medias"
                     label="物料"   >
                      <template slot-scope="scope">
                       <div v-if="scope.row.medias">
                        <p class="eslip1"  v-for="(item, index) in scope.row.mediasArr" :key="index" :label="item.value">
                           <el-tooltip class="item" effect="light" 
                           :content="  item.name + '['+ item.type +']' " placement="left">
                              <span> {{item.id}}-{{item.name}}-[{{item.type}}]</span>
                            </el-tooltip>
                          </p>
                        </div>
                     </template>
                  </el-table-column>     
               <el-table-column
                     prop="caculateMethod"
                     label="计费"  width="90"  >
                      <template slot-scope="scope">
                        <span>{{scope.row.caculateMethod|filter_caculateMethod }}</span>
                     </template>
                     </el-table-column>  
            <el-table-column
                     prop="startday"
                     label="进度">
                      <template slot-scope="scope">
                         <time-progress :adverte="scope.row"></time-progress>
                     </template>
                     </el-table-column>                
             <el-table-column
                     prop="startday"
                     label="投放时间" width="190"  >
                     <template slot-scope="scope">
                        <span>{{scope.row.startday}}~{{scope.row.endday}}</span>
                     </template>

                     </el-table-column>   
              
                  </el-table>
         </div>
    </div>
</template>

<script>
 
import Options from './Options.js';

export default {
 components: {},
 props:{
     "idplace":{ type: Number, default:0 },
 },
 data(){
     return {
         tablelist:[],   
         tableLoading: false,

         queryParams:{},
         page:1,
         pageSize:100,
         total:0,
         Options: Options.adtypeOptions,
     }
 },
 created(){
    
     this.queryParams['idplace'] = this.idplace;
     this.getListInfo();
 },
 filters:{
  "filter_adtype" : Options.filter_adtype ,
        "filter_placeType" :Options.filter_placeType ,
        "filter_caculateMethod": Options.filter_caculateMethod,

        filter_disabled(value) {
            var label = { "0": "启用", "1": "禁用", "9": "删除" };
            return label[value];
        },
        filter_modifytime(value) {
            return value.split(" ")[0];
        }
 },
 methods:{
     handleSelectionChange(){

     },
     //获取列表数据
        getListInfo() {
            this.tableLoading = true;
            PlaceAPI.getAllsAdvertes(this.page, this.pageSize, this.queryParams).then((data) => {
                this.tableLoading = false;
                // for(var i in data){
                // 把必须要的参数赋值进去
                //data[i]['adtypeOptions'] = ;
                //  }
                this.total = parseInt(data.total);
                this.tablelist = data.data;
                // console.log(data)
            })
        },
 }
}
</script>
